<template>
  <div>
    <div>
      <a-list
        v-if="comments.length"
        :data-source="comments"
        :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
        item-layout="horizontal"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <a-comment
            :author="item.author"
            :avatar="item.avatar"
            :content="item.content"
            :datetime="item.datetime"
          />
        </a-list-item>
      </a-list>
      <a-comment>
        <a-avatar slot="avatar" :src="$store.getters.user.avatar" alt="Han Solo" />
        <div slot="content">
          <a-form-item>
            <a-textarea :rows="4" :value="value" @change="handleChange" />
          </a-form-item>
          <a-form-item>
            <a-button
              html-type="submit"
              :loading="submitting"
              type="primary"
              @click="handleSubmit"
            >
              添加评论
            </a-button>
          </a-form-item>
        </div>
      </a-comment>
    </div>
    <a-comment v-for="item in remarkContent" :key="item.id">
      <span slot="actions" key="comment-nested-reply-to" @click="addRemark(item)"
        >回复</span
      >
      <a slot="author">{{ item.realname }}</a>
      <a-avatar slot="avatar" :src="item.avatar" alt="Han Solo" />
      <p slot="content">
        {{ item.content }}
      </p>
      <div>
        <recomments ref="recomment" :commentId="item.id"></recomments>
      </div>
    </a-comment>
  </div>
</template>

<script>
import moment from "moment";
import recomments from "./common.vue";
export default {
  data() {
    return {
      comments: [],
      submitting: false,
      value: "",
      moment,
      remarkContent: [],
      recomment: [],
      recommentId: 0,
      RecommentValue: "",
      realname: "",
    };
  },
  components: {
    recomments,
  },
  created() {
    this.getAllRemark();
  },
  methods: {
    addRemark(item) {
      console.log(item);
      this.$refs.recomment.forEach((items,index) => {
        if (items.commentId === item.id) {
            console.log(items,item);
          this.$refs.recomment[index].showRecomment = true;
          this.$refs.recomment[index].RecommentValue = "@" + item.realname + "  ";
        }
      });
    },

    searchAllRecomment() {
      this.$axios
        .get("/recomment/search", {
          params: {
            blogId: this.$route.params.id,
            commentId: this.commentId,
          },
        })
        .then((res) => {
          if (res.data.error === -1) {
            this.recomment = res.data.data;
            console.log(this.recomment);
          } else {
            this.recomment = [];
          }
        });
    },
    getAllRemark() {
      this.$axios
        .get("/comment/search", {
          params: {
            blogId: this.$route.params.id,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.remarkContent = res.data.data;
          }
        });
    },
    handleSubmit() {
      if (!this.value) {
        return;
      }
      this.$axios
        .post("/comment/add", {
          username: this.$store.getters.user.username,
          content: this.value,
          blogId: this.$route.params.id,
          realname: this.$store.getters.user.realname,
          avatar: this.$store.getters.user.avatar,
        })
        .then((res) => {
          if (res.data.error === -1) {
            this.$message.success("添加成功");
            this.getAllRemark();
          }
        });
    },

    handleChange(e) {
      this.value = e.target.value;
    },
    handleRecommentChange(e) {
      this.RecommentValue = e.target.value;
    },
  },
};
</script>

<style></style>
